import {Image, Statistic} from "antd";
import {useEmotionCss} from "@ant-design/use-emotion-css";

interface IndexCardProp {
  title: string;
  value: string | number;
  icon: string;
}

export default (props: IndexCardProp) => {
  const iconClassName = useEmotionCss(() => ({
    height: "80px",
    width: "80px",
    backgroundImage: `url(${props.icon})`,
    backgroundSize: '100% 100%',
    display: "inline-block",
    margin: "auto"
  }))

  const cardClassName = useEmotionCss(() => ({
    display: "inline-block",
    // transform: "translate(25%,0)"

  }))
  return (
    <div className={cardClassName}>
      <div className={iconClassName}></div>
      <div style={{display: "inline-block", position: 'relative', verticalAlign: "top"}}>
        {/*<div style={{*/}
        {/*  position: "relative",*/}
        {/*  top: "10px",*/}
        {/*  left: "15px",*/}
        {/*  fontSize: "16px",*/}
        {/*  width: "100px"*/}
        {/*}}>{props.title}</div>*/}
        <div style={{
          position: "relative",
          top: "10px",
          left: "15px",
          fontSize: "32px",
          width: "100px"
        }}><Statistic title={props.title} value={props.value} /></div>
      </div>
    </div>
  )
}
